<template>
    <div class="le">
        <div class="le-title">
            <img :src="publicUrl('/img/ret.png')" />
        </div>
        <div class="le-submit">
            <div class="le-ipt">
                <span class="label">{{transl('您的称呼')}}</span>
                <input v-model="form.name" :placeholder="transl('请输入您的称呼')" />
            </div>
            <div class="le-ipt">
                <div class="le-pr">
                    <span @click="isOpen = true">+{{ prefix[nowPrefix] }}</span>
                    <NuxtIcon name="open" @click="isOpen = true"></NuxtIcon>
                    <div ref="codeRef" class="choose-code" v-show="isOpen">
                        <div @click="choose(index)" class="code-item" v-for="(p,index) in prefix" :key="index">{{ p }}</div>
                    </div>
                </div>
                <input v-model="form.phone" type="tel" :placeholder="transl('请输入您的电话')" />
            </div>
            <div class="le-baoming" @click="th_submit">
                <span> {{transl('立即报名')}}</span>
                <div class="bao-sub">
                    {{transl('领取优惠福利')}}
                </div>
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { publicUrl,throttle } from "@/utils/index"
import type { SubmitForm } from "@/api/interface/site"
import validateRule from "~/utils/validate";
import { onClickOutside } from "@vueuse/core"
import { LangStore } from "@/stores/modules/lang"
const { transl } = LangStore()
const form = ref<SubmitForm>({phone:"",name:"",code:""})
const prefix = reactive<string[]>(["852","86","853"])
const nowPrefix = ref(0)
const isOpen = ref(false)
const { $message } = useNuxtApp()
const codeRef = ref(null)
const emits = defineEmits(['show'])
onClickOutside(codeRef,()=>{
    isOpen.value = false
})
const choose = (index:number)=>{
    nowPrefix.value = index
    isOpen.value = false
}
const submit = ()=>{
    if(!validateRule(form.value.phone,'phone')) return $message.error(transl("手机格式不正确"),'16px')
    if(!form.value.name) return $message.error(transl("请填写您的称呼"),"16px")
    if(form.value.name.length > 10) return $message.error(transl("您的称呼超过10个字了"),"16px")
    form.value.phone = validateRule(form.value.phone,'HKPhone') ? prefix[nowPrefix.value] + form.value.phone : form.value.phone
    emits('show',form.value)
}

const th_submit = throttle(submit,1000)
</script>
    
<style scoped lang="scss">
@import "./index.scss";
</style>